<template>
  <div class="app-container ohn transaction-box">
    <div class="f22 pointer" @click="goBack()">
      <i class="el-icon-arrow-left" />【{{ testTrade.name }}】测试申请单
    </div>
    <el-divider class="mt50" content-position="left"
      >申请信息 Applicant Information</el-divider
    >
    <el-form
      ref="applyCreateFrom"
      v-loading="formLoading"
      class="mt36"
      :inline="true"
      :model="applyCreateFrom"
      status-icon
      :rules="rules"
      label-width="150px"
    >
      <el-form-item
        :label="'申请单位名称\nApplication Name'"
        prop="applicationName"
      >
        <el-input
          v-model="applyCreateFrom.applicationName"
          placeholder="请输入申请单位名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item
        :label="'申请单位地址\nApplicant Address'"
        prop="applicationAddress"
      >
        <el-input
          v-model="applyCreateFrom.applicationAddress"
          placeholder="请输入申请单位地址 "
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'报告抬头\nReport Title'" prop="reportTitle">
        <el-input
          v-model="applyCreateFrom.reportTitle"
          placeholder="请输入报告抬头"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item
        :label="'同申请方\nSame as applicant'"
        prop="sameAsApplicant"
      >
        <el-input
          v-model="applyCreateFrom.sameAsApplicant"
          placeholder="请输入同申请方"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'其他名称\nOthers Name'" prop="otherName">
        <el-input
          v-model="applyCreateFrom.otherName"
          placeholder="请输入其他名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'其他地址\nOthers Address'" prop="otherAddress">
        <el-input
          v-model="applyCreateFrom.otherAddress"
          placeholder="请输入其他地址"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'联系人\nContact'" prop="contact">
        <el-input
          v-model="applyCreateFrom.contact"
          placeholder="请输入联系人"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'电话\nTel'" prop="tel">
        <el-input
          v-model="applyCreateFrom.tel"
          placeholder="请输入电话"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'传真\nFax'" prop="fax">
        <el-input
          v-model="applyCreateFrom.fax"
          placeholder="请输入传真"
          clearable
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item :label="'电邮\nE-mail'" prop="email">
        <el-input
          v-model="applyCreateFrom.email"
          placeholder="请输入电邮"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item
        :label="'报告邮寄地址\nReport Delivered To'"
        prop="deliveredTo"
      >
        <el-input
          v-model="applyCreateFrom.deliveredTo"
          type="textarea"
          placeholder="请输入邮寄地址"
          :rows="2"
          maxlength="100"
          show-word-limit
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'付款方\nPayer'" prop="payer">
        <el-input
          v-model="applyCreateFrom.payer"
          placeholder="请输入付款方"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'发票抬头\nInvoice Title'" prop="invoiceTitle">
        <el-input
          v-model="applyCreateFrom.invoiceTitle"
          placeholder="请输入发票抬头"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-divider class="mb36" content-position="left"
        >样品信息Sample Information</el-divider
      >
      <el-form-item :label="'样品名称\nSample Name'" prop="sampleName">
        <el-input
          v-model="applyCreateFrom.sampleName"
          placeholder="请输入样品名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'样品数量\nSample Quantity'" prop="sampleQuantity">
        <el-input
          v-model="applyCreateFrom.sampleQuantity"
          placeholder="请输入样品数量"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'样品型号\nSample Model'" prop="sampleModel">
        <el-input
          v-model="applyCreateFrom.sampleModel"
          placeholder="请输入样品型号"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'商标\nBrand'" prop="brand">
        <el-input
          v-model="applyCreateFrom.brand"
          placeholder="请输入商标"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'样品批号\nLot No'" prop="lotNo">
        <el-input
          v-model="applyCreateFrom.lotNo"
          placeholder="请输入样品批号"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'规格\nSpecification'" prop="specification">
        <el-input
          v-model="applyCreateFrom.specification"
          placeholder="请输入规格"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'供应商\nSupplier'" prop="supplier">
        <el-input
          v-model="applyCreateFrom.supplier"
          placeholder="请输入供应商"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'订单号\nP/O No'" prop="poNum">
        <el-input
          v-model="applyCreateFrom.poNum"
          placeholder="请输入订单号"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'购买商\nBuyer'" prop="buyer">
        <el-input
          v-model="applyCreateFrom.buyer"
          placeholder="请输入购买商"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'生产商\nManufacturer'" prop="manufacturer">
        <el-input
          v-model="applyCreateFrom.manufacturer"
          placeholder="请输入生产商"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'出口地\nReport Type'" prop="exportedTo">
        <el-select
          v-model="applyCreateFrom.exportedTo"
          style="width: 240px"
          placeholder="请选择出口地"
        >
          <el-option
            v-for="(item, index) in exportedOptions"
            :key="item.key + index"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="'生产国\nCountry of Origin'" prop="originCountry">
        <el-radio-group
          v-model="applyCreateFrom.originCountry"
          style="width: 240px"
        >
          <el-radio label="中国" />
          <el-radio label="其它" />
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="'报告语言\nReport Language'" prop="language">
        <el-radio-group v-model="applyCreateFrom.language" style="width: 240px">
          <el-radio label="英文" />
          <el-radio label="中文" />
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="'报告格式\nReport format'" prop="reportFormat">
        <el-select
          v-model="applyCreateFrom.reportFormat"
          style="width: 240px"
          placeholder="请选择报告格式"
        >
          <el-option
            v-for="(item, index) in reportFormatOptions"
            :key="item.key + index"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="'报告方式\nReport Type'" prop="reportType">
        <el-select
          v-model="applyCreateFrom.reportType"
          style="width: 240px"
          placeholder="请选择报告方式"
        >
          <el-option
            v-for="(item, index) in reportTypeOptions"
            :key="item.key + index"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="'是否接受分包\nAgree to subcontract'" prop="">
        <el-radio-group
          v-model="applyCreateFrom.agreeToSubcontract"
          style="width: 240px"
        >
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="'服务类型\nService Requested'" prop="serviceType">
        <el-select
          v-model="applyCreateFrom.serviceType"
          style="width: 240px"
          placeholder="请选择务类型"
        >
          <el-option
            v-for="(item, index) in serviceTypeOptions"
            :key="item.key + index"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="'样品处理方式\nSample Treatment'"
        prop="sampleTreatment"
      >
        <el-radio-group
          v-model="applyCreateFrom.sampleTreatment"
          style="width: 240px"
        >
          <el-radio label="退还样品(邮费自付)" />
          <el-radio label="留样（3 个月）" />
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="'申请公司授权人签名\nSignature for and on behalf of the applicant and Company Chop'"
        prop="applicantSigCop"
      >
        <el-input
          v-model="applyCreateFrom.applicantSigCop"
          type="textarea"
          placeholder="请输入申请公司授权人签名"
          :rows="2"
          maxlength="100"
          show-word-limit
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item :label="'申请日期 \nDate'" prop="applicationDate">
        <el-date-picker
          v-model="applyCreateFrom.applicationDate"
          type="date"
          placeholder="请选择申请日期"
          style="width: 240px"
        />
      </el-form-item>
      <el-divider content-position="left">多种材料清单样品填写表</el-divider>
      <vxe-toolbar ref="xToolbar">
        <template #tools>
          <el-button type="primary" size="small" plain @click="insertEvent"
            >新增</el-button
          >
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="xTable"
        border
        show-footer
        show-overflow
        class="editable-footer mb20"
        :merge-footer-items="mergeFooterItems"
        :row-config="{ isHover: true }"
        :export-config="{}"
        :footer-cell-class-name="footerCellClassName"
        :data="applyCreateFrom.testApplicationItemList"
        :edit-config="{ trigger: 'click', mode: 'row' }"
        @edit-closed="editClose"
      >
        <vxe-column type="seq" width="60" :title="'序号\nNum'" align="right" />
        <vxe-column
          field="sampleName"
          :title="'样品（部位）名称\n(Part of)Sample Name'"
          :edit-render="{}"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.sampleName" type="text" />
          </template>
        </vxe-column>
        <vxe-column
          field="sampleModel"
          :title="'样品型号\nSample Model'"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
          width="160"
        >
          <template #edit="{ row }">
            <vxe-input
              v-model="row.sampleModel"
              type="text"
              :min="1"
              :max="120"
              @change="updateFooterEvent"
            />
          </template>
        </vxe-column>
        <vxe-column
          field="sampleMaterial"
          :title="'材质\nStyle/Sample Material'"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input
              v-model="row.sampleMaterial"
              type="text"
              @input="updateFooterEvent"
            />
          </template>
        </vxe-column>

        <vxe-column
          field="sampleDescription"
          :title="'样品描述\nSample Description'"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input
              v-model="row.sampleDescription"
              type="text"
              @input="updateFooterEvent"
            />
          </template>
        </vxe-column>

        <vxe-column
          field="testingItem"
          :title="'测试项目\nTesting Items'"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input
              v-model="row.testingItem"
              type="text"
              @input="updateFooterEvent"
            />
          </template>
        </vxe-column>
        <vxe-column
          field="accordingTo"
          :title="'判定依据\nAccording to'"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input
              v-model="row.accordingTo"
              type="text"
              @input="updateFooterEvent"
            />
          </template>
        </vxe-column>
        <vxe-column
          field="remark"
          :title="'备注\nRemark'"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input
              v-model="row.remark"
              type="text"
              @input="updateFooterEvent"
            />
          </template>
        </vxe-column>
        <vxe-column title="操作" width="80">
          <template #default="{ row }">
            <el-button type="text" status="primary" @click="deleteEvent(row)"
              >删除</el-button
            >
          </template>
        </vxe-column>
      </vxe-table>
      <el-form-item>
        <div class="tr">
          <el-button type="primary" @click="submitForm('applyCreateFrom')"
            >保存</el-button
          >
          <el-button @click="resetForm('applyCreateFrom')">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import methods from "./pub_methods/validate";
export default {
  data() {
    return {
      formLoading: false,
      rules: methods.quotationCreateValidate,
      testTrade: {
        name: "",
        id: "",
        status: "",
      },
      applyCreateFrom: {
        testTradeId: "2",
        reportDate: "2022-01-01 23:10:23",
        recDate: "2022-03-04 15:20:30",
        csName: "cs name",
        reportNum: "001",
        applicationName: "贵州金丰特产有限公司",
        applicationAddress: "贵州省贵阳市人民路23号",
        reportTitle: "贵州刺梨成分检测",
        sameAsApplicant: "同申请方",
        otherName: "贵州金丰刺梨检测",
        otherAddress: "贵州省贵阳市万丽酒店",
        contact: "贵州小吴",
        tel: "15920583012",
        fax: "9419513",
        email: "xiaowu@jinfeng.com",
        deliveredTo: "贵阳市人民路23号金丰特产厂",
        payer: "同申请方",
        invoiceTitle: "申请方",
        sampleName: "贵州刺梨",
        sampleQuantity: "3公斤",
        sampleModel: "黄色刺梨",
        brand: "金丰刺梨",
        lotNo: "0435-1941-2346",
        specification: "大果",
        supplier: "贵州小张作坊",
        poNum: "0134-4598-3845",
        buyer: "贵州金丰特产",
        manufacturer: "贵州大自然生产",
        exportedTo: "其他",
        originCountry: "中国",
        language: "中文",
        reportFormat: "一个样品一份报告",
        reportType: "电子文档",
        agreeToSubcontract: "是",
        serviceType: "标准服务",
        testRequirement: "测试刺梨的维生素情况，以及其他成分",
        sampleTreatment: "退还样品",
        applicantSigCop: "无签名",
        applicationDate: "2022-03-05 12:01:12",
        employee: "老王",
        customer: "贵州小马哥",
        testApplicationItemList: [
          {
            sampleName: "贵州刺梨",
            sampleModel: "大果刺梨",
            sampleMaterial: "果蔬",
            sampleDescription: "加工后的刺梨3斤",
            testingItem: "同上",
            accordingTo: "维生素含量是否大于60%",
            remark: "有无其他有益成分",
          },
          {
            sampleName: "贵州腊肉",
            sampleModel: "黑毛猪肉",
            sampleMaterial: "肉类",
            sampleDescription: "烟熏腊肉",
            testingItem: "列明",
            accordingTo: "腊肉是否有致癌物质",
            remark: "里面的硝基化合物是否致癌",
          },
          {
            sampleName: "贵州苗族银饰品",
            sampleModel: "银手镯",
            sampleMaterial: "银",
            sampleDescription: "亮晶晶的白银",
            testingItem: "同上",
            accordingTo: "银子纯度",
            remark: "检测有没有卖假的银饰品",
          },
        ],
      },
      mergeFooterItems: [
        { row: 0, col: 0, rowspan: 0, colspan: 8 },
        // { row: 0, col: 1, rowspan: 9, colspan: 9 },
      ],
      exportedOptions: [
        { key: "Europe", value: "欧洲" },
        { key: "USA", value: "美国" },
        { key: "Others", value: "其他" },
      ],
      reportFormatOptions: [
        { key: "1", value: "一个样品一份报告" },
        { key: "2", value: "一份申请单一份报告" },
        { key: "3", value: "一个测试项目一份报告" },
        { key: "4", value: "其它" },
      ],
      reportTypeOptions: [
        { key: "China", value: "中国" },
        { key: "Others", value: "其他" },
      ],
      serviceTypeOptions: [
        { key: "China", value: "电子文档 " },
        { key: "Others", value: "纸质文档" },
        { key: "2", value: "其它" },
      ],
      allowAdd: true,
    };
  },
  created() {
    this.testTrade.name = this.$route.query.name;
    this.testTrade.id = this.$route.query.id;
    this.testTrade.status = this.$route.query.status;
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.applyCreateFrom.testTradeId = this.testTrade.id;
          const insertData = this.$refs.xTable.getRecordset();
          this.applyCreateFrom.testApplicationItemList =
            insertData.insertRecords;
          if (this.applyCreateFrom.testApplicationItemList.length === 0) {
            this.$message.warning("请填写多种材料清单样品表");
          } else {
            this.formLoading = true;
            this.$store
              .dispatch("transaction/saveTestApplication", this.applyCreateFrom)
              .then((res) => {
                const { data, success, errorMessage } = res;
                if (success) {
                  this.$refs[formName].resetFields();
                  this.$message.success(data.msg);
                } else {
                  this.$message.error(errorMessage);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.formLoading = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.applyCreateFrom.testApplicationItemList = [];
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.push({
        path: "/detection/list",
      });
    },
    footerCellClassName({ $rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if ($rowIndex === 0) {
          return "col-blue";
        }
      }
      if (columnIndex === 2) {
        if ($rowIndex === 1) {
          return "col-red";
        }
      }
    },
    // 在值发生改变时更新表尾合计
    updateFooterEvent() {
      const $table = this.$refs.xTable;
      $table.updateFooter();
    },
    async insertEvent(row) {
      if (this.allowAdd) {
        const record = {
          sampleName: "",
          sampleModel: "",
          sampleMaterial: "",
          sampleDescription: "",
          testingItem: "",
          accordingTo: "",
          remark: "",
        };
        const { row: newRow } = await this.$refs.xTable.insert(record, row);
        await this.$refs.xTable.setActiveCell(newRow, "productDes");
      }
    },
    // 编辑单元格事件
    async editClose({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
    }) {
      const errMap = await this.$refs.xTable
        .validate(true)
        .catch((errMap) => errMap);
      if (errMap) {
        this.allowAdd = false;
      } else {
        this.allowAdd = true;
      }
    },
    deleteEvent(row) {
      this.$confirm("您确定要删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.xTable.remove(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.transaction-box {
  .el-form .el-form-item__label {
    background-color: red;
    line-height: 20px !important;
  }
  .el-form-item--medium .el-form-item__label {
    line-height: 20px !important;
  }
  .remark-content {
    font-size: 12px;
    color: #808080;
    line-height: 20px;
  }
}
</style>
